<template>
	<div class="signin_content">
		<CustomInput ref="username" :name="username.name" :type="username.type" :value="username.value" :placeholder="username.placeholder" :title="username.title" :maxlength="username.maxlength" :verify="username.verify" v-on:chainHandle="chainHandle" />
		<CustomInput ref="userpassword" :name="userpassword.name" :type="userpassword.type" :value="userpassword.value" :placeholder="userpassword.placeholder" :title="userpassword.title" :maxlength="userpassword.maxlength" :verify="userpassword.verify" v-on:chainHandle="chainHandle" />
		<CustomInput v-if="type ==='signup'" ref="reuserpassword" :name="reuserpassword.name" :type="reuserpassword.type" :value="reuserpassword.value" :placeholder="reuserpassword.placeholder" :title="reuserpassword.title" :maxlength="reuserpassword.maxlength" :verify="reuserpassword.verify" v-on:chainHandle="chainHandle" />
		<CustomInput ref="sms" :name="sms.name" :type="sms.type" :value="sms.value" :placeholder="sms.placeholder" :title="sms.title" smsmodul="true" :maxlength="sms.maxlength" :verify="sms.verify" v-on:chainHandle="chainHandle" />
		<span v-if="isShowDialog">{{dialogMsg}}</span>
		<a @click="sendForm($event)" class="button signin_content_send_form">{{sendButtonMsg}}</a>
		<router-link :to="{name:'signin'}" class="button aside" v-if="type==='signup'">我已加入</router-link>
		<router-link :to="{name:'signup'}" class="button aside" v-if="type==='signin'">加入我们</router-link>
		<router-link :to="{name:'getpassword'}" class="button on" v-if="type==='signin'">找回密码</router-link>
		<router-link :to="{name:'resetpassword'}" class="button on" v-if="type==='signin'">忘记密码</router-link>
	</div>
</template>

<script>
	import CustomInput from "../../components/user/custom-input.vue";
	export default {
		name:"SignForm",
		props:["sendButtonMsg", "type"],
		components:{
			CustomInput
		},
		data: function(){
			let that = this;
			let args = {
				isShowDialog: false,
				dialogMsg:"",
				formType: "signin",
				username:{
					name: "username",
					type: "text",
					value: "",
					placeholder: "用户名",
					title: "用户名",
					maxlength: 8,
					verify: function(v){
						if (v.length < 8){
							return {
								bool: false,
								msg: "长度不小于8位"
							}
						}else{
							return{
								bool:true
							}
						}
					}
				},
				userpassword:{
					name: "userpassword",
					type: "password",
					value: "",
					placeholder: "6位登录密码",
					title: "密码",
					maxlength: 6,
					verify: function(v){
						if (v.length < 6){
							return {
								bool: false,
								msg: "长度不小于6位"
							}
						}else{
							return{
								bool:true
							}
						}
					}
				},
				sms:{
					name: "sms",
					type: "text",
					value: "",
					placeholder: "4位短信验证码",
					title: "验证码",
					maxlength: 4,
					verify: function(v){
						if (v.length < 4){
							return {
								bool: false,
								msg: "长度不小于4位"
							}
						}else{
							return{
								bool:true
							}
						}
					}
				},
			};
			extend(args, {
				reuserpassword:extend(extend({}, args.userpassword), {
					title:"验证密码",
					name:"reuserpassword",
					verify: function(v){
						if (v.length < 6){
							return {
								bool: false,
								msg: "长度不小于6位"
							}
						}else if (that.$refs.userpassword.getValue("inputValue") !== v){
							return {
								bool:false,
								msg: "验证密码失败"
							}
						}else{
							return{
								bool:true
							}
						}
					}
				})
			})
			return args;
		},
		methods:{
			chainHandle:function(args){
				this.$set(this, args.name, extend(this[args.name], {value:args.value}));
				console.log(this[args.name], args)
			},
			sendForm: function(e){
				let bool = true,
					that = this;
				console.log(that);
				(that.formType === "signup" ? "username userpassword reuserpassword sms" : "username userpassword sms").split(' ').each((i, name) => {
					if (that.$refs[name]["getValue"]("error") === true){
						bool =false;
						return false;
					}
				});
				if (bool){
					this.$emit("sendFormHandle", that.formType = "signup" ? {
						username:that.username.value,
						userpassword:that.userpassword.value,
						reuserpassword:that.reuserpassword.value,
						sms:that.sms.value
					} : {
						username:that.username.value,
						userpassword:that.userpassword.value,
						sms:that.sms.value
					});
				}else{
					this.$set(this, "isShowDialog", true);
					this.$set(this, "dialogMsg", "提交失败");
				}
			}
		},
		created:function(){
			this.$set(this, "formType", this.type);
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	div{
		&.signin_content{
			background-color: #fff;
			padding:20/@base 0;
			a{
				&.button{
					display:block;
					text-align: center;
					padding:10/@base 20/@base;
					font-size:26/@base;
					border-radius: 5/@base;
					margin:20/@base;
					&.signin_content_send_form{
						background-color: #CC2020;
						color:#fff;
					}
					&.aside{
						background-color: #00FF00;
						color:#000;
					}
					&.on{
						background-color: #efefef;
						color:#aaa;
					}
				}
			}
		}
	}
</style>
